import { defineComponent } from "vue";
import "./style.scss";

export default defineComponent({
  props: {
    readonly: Boolean,
    disabled: Boolean,
    modelValue: String,
    placeholder: String,
  },
  setup(props, context) {
    return {};
  },
  mounted() {},
  methods: {
    onInput(e: Event) {
      //@ts-ignore
      this.$emit("update:modelValue", e.target.value);
    },
    onClear() {
      this.$emit("update:modelValue", "");
      this.$emit("clear");
      this.focus();
    },
    onFocus() {},
    focus() {
      //@ts-ignore
      this.$refs.input.focus();
    },
  },
  render() {
    const { $slots, $attrs, placeholder } = this;
    const hasModel = this.modelValue !== undefined && !!this.modelValue;
    return (
      <div class="input" onFocusin={this.onFocus}>
        <div class="input__prefix">{$slots.prefix && $slots.prefix(this)}</div>
        <input
          class="input__el"
          ref="input"
          value={this.modelValue}
          disabled={this.disabled}
          readonly={this.readonly}
          onInput={this.onInput}
          placeholder={placeholder}
        />
        {hasModel && <div class="input__clear" onClick={this.onClear}></div>}
        <div class="input__suffix">{$slots.suffix && $slots.suffix(this)}</div>
      </div>
    );
  },
});
